import React, { Component } from 'react'
import './PCP.scss'
import CNs from 'classnames'
export default class PCP extends Component {
  constructor() {
    super()
    this.state = {
      mask: false,
      black: false
    }
  }
  render() {
    return (
      <div className="PCP">
        <div className={CNs({ blacktrue: this.state.black })}></div>
        <div className={CNs({ blackbox: true, black: !this.state.black })}>
          <div className="blackheader">
            <span className="closeheader" onClick={this.blackreduce}>
              x
            </span>
          </div>
          <div className="blackbody">
            <h3>加入蜂鸟配送</h3>
            <span>全职骑手工作有保障</span>
            <div className="mallbox">
              <img
                src={require('./../../../../assets/Peisong/apply-entry.png')}
                alt=""
              />
              <span>扫码加入蜂鸟配送</span>
            </div>
          </div>
        </div>
        <div
          className={CNs({ masktrue: this.state.mask })}
          onClick={this.clearmask}
        ></div>
        <div className={CNs({ mask: true, show: this.state.mask })}>
          <img
            src={require('./../../../../assets/Peisong/delivery-download-bg.jpg')}
            alt="bg"
            className="Dbg"
          />
          <img
            src={require('./../../../../assets/Peisong/delivery-app-icon.png')}
            alt="bg"
            className="Dicon"
          />
          <p>蜂鸟跑腿</p>
          <small>同城即送，安全准时</small>
          <img
            src={require('./../../../../assets/Peisong/delivery-QRCode.png')}
            alt="bg"
            className="DQR"
          />
          <small className="small2">扫描二维码下载蜂鸟跑腿</small>
        </div>
        <section className="PCSS1">
          <div className="PCSS1C">
            <div className="PCSS1CW">
              <h3>蜂鸟骑手招募</h3>
              <p>
                全职收入有保障，固定的配送区域，稳定的工作时间；
                专人指导入门快，丰富的线上培训，灵活的师徒教学；
                专业装备上岗，特有保险保障，多劳多得。{' '}
              </p>
              <span className="AppDown" onClick={this.blackadd}>
                申请成为骑手
              </span>
              <div className="hr"></div>
              <div className="abox">
                <div className="aitem">
                  <img
                    src={require('./../../../../assets/Peisong/a11.png')}
                    alt="a1"
                  />
                  <span>收入稳定</span>
                </div>
                <div className="aitem">
                  <img
                    src={require('./../../../../assets/Peisong/a12.png')}
                    alt="a1"
                  />
                  <span>专业培训</span>
                </div>
                <div className="aitem">
                  <img
                    src={require('./../../../../assets/Peisong/a13.png')}
                    alt="a1"
                  />
                  <span>保险保障</span>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="PCSS2">
          <div className="PCSS1C">
            <div className="PCSS1CW">
              <h3>蜂鸟众包</h3>
              <p>
                想利用零散的时间挣钱，却没有找到好平台？蜂鸟众包就等你加入！打造全民配送概念，人人都可成为骑手，抢单挣钱。通过软件轻松获取周边商家的运单，抢单、取餐、送餐，只需三步就能获得丰厚收入。蜂鸟众包将成为你口袋里的兼职赚钱神器！{' '}
              </p>
              <span className="AppDown" onClick={this.Download}>
                App下载
              </span>
              <div className="hr"></div>
              <div className="abox">
                <div className="aitem">
                  <i
                    className="i1"
                    src={require('./../../../../assets/Peisong/a11.png')}
                    alt="a1"
                  />
                  <span>单量多</span>
                </div>
                <div className="aitem">
                  <i
                    className="i2"
                    src={require('./../../../../assets/Peisong/a12.png')}
                    alt="a1"
                  />
                  <span>路程短</span>
                </div>
                <div className="aitem">
                  <i
                    className="i3"
                    src={require('./../../../../assets/Peisong/a13.png')}
                    alt="a1"
                  />
                  <span>收入高</span>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    )
  }
  getchecked1 = () => {
    var str = this.props.match.path
    var arr = str.split('/')
    const path = arr.pop()
    // console.log(path)
    switch (path) {
      case 'PCMain':
        window.location.reload(true)
        break
      case 'PCS':
        localStorage.setItem('check', 2)
        break
      case 'PCP':
        localStorage.setItem('check', 3)
        break
      case 'PCPAW':
        localStorage.setItem('check', 4)
        break
      default:
        break
    }
  }
  componentDidMount() {
    window.scrollTo(0, 0)
    this.getchecked1()

    // this.forceUpdate()
    //获取地址信息
    // window.opener.location.href = window.opener.location.href
  }
  // 弹出
  Download = () => {
    console.log(1)
    this.setState({
      mask: true
    })
  }
  // 移出
  clearmask = () => {
    this.setState({
      mask: false
    })
  }
  // blackadd
  blackadd = () => {
    this.setState({
      black: true
    })
  }
  blackreduce = () => {
    this.setState({
      black: false
    })
  }
}
